<template>
  <div class="itemFather">
    <div v-for="(item, index) in catalog" :key="index" class="item" @click="itemClick(index)" :style="{borderColor: '#' + color, backgroundColor: bgcolor}">
      {{item.title}}
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      catalog: [
        {
          title: 'HTML',
          api: 'https://www.jianshu.com/u/23749041c9c0'
        },
        {
          title: 'CSS',
          api: 'https://www.jianshu.com/nb/45359849'
        },
        {
          title: 'JavaScript',
          api: 'https://www.jianshu.com/nb/40327873'
        },
        {
          title: 'HTTP',
          api: 'https://www.jianshu.com/nb/45389709'
        },
        {
          title: 'VUE',
          api: 'https://www.jianshu.com/nb/44542782'
        },
        {
          title: 'Git',
          api: 'https://www.jianshu.com/nb/45359917'
        },
        {
          title: 'NPM',
          api: 'https://www.jianshu.com/nb/45412342'
        },
        {
          title: 'Webpack',
          api: 'https://www.jianshu.com/u/23749041c9c0'
        },
        {
          title: 'VIM',
          api: 'https://www.jianshu.com/nb/45412414'
        }
      ],
      color: 'fff',
      colorday: 'fff',
      colornight: '666',
      bgcolor: '',
      bgcolorday: '',
      bgcolornight: 'rgba(0, 0, 0, .2)',
    };
  },
  computed:{
  },
  watch:{
  },
  methods: {
    itemClick(index) {
      window.open(this.catalog[index].api)
    }
  },
  computed:{
    nightData() {
      return this.$store.state.isNight
    }
  },
  watch:{
    nightData(newData, oldData) {
      if(newData){
        this.color = this.colorday
        this.bgcolor = this.bgcolorday
      } else {
        this.color = this.colornight
        this.bgcolor = this.bgcolornight
      }
    }
  },
};
</script>

<style scoped>
.itemFather {
  height: 400px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  line-height: 390px;
  text-align: center;
  font-family: pangmeng;
  color: #000;
  font-size: 30px;
  
}
.item {
  flex: 1;
  transition: all .5s;
  border-left: 10px solid;
  border-right: 10px solid;
}
.item:hover {
  color: Violet;
  cursor: pointer;
  background-color: rgba(0, 0, 0, .6);
}
</style>
